<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表单操作 </title>
    <style>

        form{
            width: 300px;
            margin: 50px auto;
        }

        form div{
            margin: 10px 0;
        }

        form div > label:first-child{
            font-weight: bold;
        }

        .action{
            margin-top: 30px;
            text-align: center;
        }

        button{
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <label for="">账户：</label>
            <input type="text" name="username" placeholder="用户名">
        </div>
        <div>
            <label for="">性别：</label>
            
            <input type="radio" name="gender" value="女">
            <label for="">女</label>

            <input type="radio" name="gender" value="男">
            <label for="">男</label>

        </div>

        <div>
            <label for="">爱好：</label>

            <input type="checkbox" name="likes" value="dy">
            <label for="">电影</label>

            <input type="checkbox" name="likes" value="yy">
            <label for="">音乐</label>

            <input type="checkbox" name="likes" value="yd">
            <label for="">运动</label>
        </div>

        <div>
            <label for="">籍贯：</label>
            <select name="home">
                <option value="sx">山西</option>
                <option value="sd">山东</option>
                <option value="hb">河北</option>
                <option value="hn">河南</option>
            </select>
        </div>

        <div>
            <label for="">简介：</label>
            <textarea name="desc" ></textarea>
        </div>

        <div class="action">
            <button type="button" id="read">获取</button>
            <button type="button" id="setting">设置</button>
        </div>

    </form>


</body>
<script src="../lib/font/jquery.min.js"></script>
<script>
    $(function(){
        $("#read").click(function(){
            //普通文本框取值
            let username = $("input[name='username']").val();
            console.log("username",username);
            //单选框取值
            let gender = $("input[name='gender']:checked").val();
            console.log("gender",gender);
            //复选框取值
            let items  = $("input[name='likes']:checked");
            let likes = [];
            $.each(items,function(i,n){
                likes.push($(n).val());
                  
            })
            console.log('likes',likes);
            
            //下拉框取值
            let home = $("select[name='home']").val();
            console.log("home :",home);

            //文本域取值
            let desc = $("textarea[name='desc']").val();
            console.log("desc:", desc);
            
            
        })
        
        $("#setting").click(function(){
            //设置普通文本框的值
            $("input[name='username']").val("李四");
            //设置单选框的值
            //太复杂，不推荐
           // $("input[name='gender'][value='女']").prop('checked',true);
            
           //设置单选，复选框的值
           $("input[name='gender']").val(['女']);
            $("input[name='likes']").val(['yy','yd']);

            //设置下拉框的值
            $("select[name='home']").val('hn');

            $("textarea[name='desc']").val('我很好');


        })
    });
</script>
</html>